<template>
    <view class="container">
        <!-- 这里是滚动内容 -->
        <view class="content">
            <view class="list">
                <view class="item" @tap="tapitem(i)" :style="{marginTop:i.top?i.top:'1rpx'}" v-for="i in config">
                    <view class="view">{{i.title}}</view>
					<view v-if="i.key!=='photo'&&i.key!=='logo'&&i.key!=='pointMap'">
						<view class="text" v-if="data[i.key]">{{data[i.key]}}</view>
						<view class="text" v-if="!(data[i.key])">空</view>
					</view>
					<view v-else>
						<view v-if="getUrl(data[i.key])==null">
							<view class="text">空</view>
						</view>
						<view v-else-if="getUrl(data[i.key]).type=='Array'" v-for="url in getUrl(data[i.key]).data" style="display: inline-block;">
							<image :src="this.$baseUrl + url" alt="图" class="photoPreview" />
						</view>
						<view v-else>
							<image :src="this.$baseUrl + getUrl(data[i.key]).data" alt="点位图" class="photoPreview"/>
						</view>
					</view>
                </view>
            </view>
        </view>
        <CompileButton @click="navigateToPage1" style="left: 90%;"/>
        <AlarmButton @click="navigateToPage2(this.data.id)" style="left: 90%;bottom: 15%;"/>
    </view>
</template>

<script>
    import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons';
    import CompileButton from '@/common/component/CompileButton.vue';
    import AlarmButton from '@/common/component/AlarmButton.vue';
    export default {
        components: {
            uniIcons,CompileButton,AlarmButton
        },
        onLoad(options) {
            this.clientStr = decodeURIComponent(options.client);
            const client = JSON.parse(this.clientStr);
            this.data.id = client.id;
            this.data.name = client.name;
            this.data.address = client.address;
            this.data.photo = client.photo;
            this.data.logo = client.logo;
            this.data.state = client.state;
            if (client.state === "0") {
                this.data.stateName = "正常";
            } else if (client.state === "1") {
                this.data.stateName = "冻结";
            }
            else if (client.state === "2") {
                this.data.stateName = "暂停使用";
            }
            this.data.pointMap = client.pointMap;
            this.data.explanation = client.explanation;
            this.data.linkman = client.linkman;
            this.data.dispatcher = client.dispatcher;
            this.data.dispatchSupervisor = client.dispatchSupervisor;
            this.data.receptionist = client.receptionist;
            this.data.teleLinkman = client.teleLinkman;
            this.data.teleDispatcher = client.teleDispatcher;
            this.data.teleDispatchSupervisor = client.teleDispatchSupervisor;
            this.data.teleReceptionist = client.teleReceptionist;
            this.data.longitude = client.longitude;
            this.data.latitude = client.latitude;
        },
        props: {
            config: {
                type: Array,
                default: [{
                    title: '单位名称',
                    key: 'name'
                },
                    {
                        title: '地址',
                        key: 'address'
                    },
                    {
                        title: '单位照片',
                        key: 'photo'
                    },
                    {
                        title: '单位logo',
                        key: 'logo'
                    },
                    {
                        title: '点位图',
                        key: 'pointMap'
                    },
                    {
                        title: '单位状态',
                        key: 'stateName'
                    },
                    {
                        title: '说明',
                        key: 'explanation'
                    },
                    {
                        title: '联系人',
                        key: 'linkman'
                    },
                    {
                        title: '接警人',
                        key: 'dispatcher'
                    },
                    {
                        title: '接警领导',
                        key: 'dispatchSupervisor'
                    },
                    {
                        title: '值班员',
                        key: 'receptionist'
                    },
                    {
                        title: '联系人电话',
                        key: 'teleLinkman'
                    },
                    {
                        title: '接警人电话',
                        key: 'teleDispatcher'
                    },
                    {
                        title: '接警领导电话',
                        key: 'teleDispatchSupervisor'
                    },
                    {
                        title: '值班员电话',
                        key: 'teleReceptionist'
                    },
                    {
                        title: '经度',
                        key: 'longitude'
                    },
                    {
                        title: '纬度',
                        key: 'latitude'
                    },
                ]
            },
            data: {
                type: Object,
                default: {
                    name: '',
                    photo: '',
                    logo: '',
                    pointMap: '',
                    state: '',
                    stateName: '',
                    address: '',
                    explanation: '',
                    linkman: '',
                    teleLinkman: '',
                    dispatcher: '',
                    teleDispatcher: '',
                    dispatchSupervisor: '',
                    teleDispatchSupervisor: '',
                    receptionist: '',
                    teleReceptionist: '',
                    longitude: '',
                    latitude: '',
                }
            }
        },
        data() {
            return {
                clientStr: '',
                tapitem(info) {
                    console.log('info', info)
                    this.$emit('')
                },
            };
        },
        methods: {
			getUrl(url){
				if(url==null){
					return null
				}
				const urlResult = {type:"String",data:""}
				if(url.includes(',')){
					const urlList = url.split(',')
					urlResult.type="Array"
					urlResult.data=urlList
					return urlResult
				}
				urlResult.data=url
				return urlResult
			},
            navigateToPage1() {
                uni.navigateTo({
                    url: '/pages/client/compile?client=' + this.clientStr,
                });
            },
            navigateToPage2(id) {
                uni.navigateTo({
                    url: '/pages/client/warn?id=' + id,
                });
            },
            navigateToPage3() {
                uni.navigateBack();
            }
        }
    }
</script>

<style lang="scss" scoped>
	@import url("@/common/globleCSS/photoPreview.css");
    .container {
        height: 100%;
        padding-bottom: constant(safe-area-inset-bottom);
        /* 适配iOS<11.2 */
        padding-bottom: env(safe-area-inset-bottom);
        /* 适配iOS>11.2 */
    }

    .content {
        height: calc(100% - 50px);
        /* 假设底部吸底栏高度为50px */
        overflow-y: auto;
        /* 开启滚动 */
    }

    .list {
        display: flex;
        flex-direction: column;
        background-color: #f2f2f2;
    }

    .item {
        display: flex;
        align-items: center;
        background-color: #fff;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 0 30rpx;

        &:active {
            background-color: #f2f2f2;
        }

        .view {
            padding: 30rpx 0;
            font-size: 14px;
            flex: 1;
            color: #333333;
        }

        .text {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 0;
            overflow: hidden;
            font-size: 14px;
            color: #999;
        }
    }
</style>
